<template>
	<div class="playerinformation">
		<el-form label-width="80px" class="searchform">
		  <el-form-item label="功能名称:">
		    <el-input v-model="searchForm.name" placeholder="请输入名称"></el-input>
		  </el-form-item>
		  <!-- <el-form-item label="url:">
		    <el-input v-model="searchForm.url" placeholder="请输入url"></el-input>
		  </el-form-item> -->
		</el-form>
		<el-button type="primary" @click="search()">查询</el-button>
		<!-- <el-button type="primary" @click="dialogFormVisible = true">添加</el-button> -->
		
		  <el-table
		    :data="functions"
		    border
			fit
			stripe=""
		    style="width: 100%">
			
		    <el-table-column
			type="index"
			width="100px"
			align="center"
		      label="序号"
		    >
		    </el-table-column>
			<el-table-column
		      hidden
		      prop="id"
			  align="center"
		      label="编号"
		    >
		    </el-table-column>
		    <el-table-column
		      prop="name"
			  align="center"
		      label="名称"
		    >
		    </el-table-column>
		    <!-- <el-table-column
		      prop="url"
			  align="center"
		      label="url"
		    >
		    </el-table-column> -->
		    <el-table-column
		      fixed="right"
			  align="center"
		      label="操作"
		    >
		      <template slot-scope="scope">
					<el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
					<el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
				</template>
		    </el-table-column>
		  </el-table>

		  <!-- 分页 -->
		  <div style="text-align:right;">
			  <el-pagination
			background
			layout="prev, pager, next"
			:total="1000">
			</el-pagination>
		  </div>

		  <!-- <el-dialog title="添加功能" :visible.sync="dialogFormVisible" width="300px">
			<form>
				<div>
				名称
				<el-input v-model="form.name" autocomplete="off"></el-input>
				</div>
				<div>
				url
				<el-input v-model="form.url" autocomplete="off"></el-input>
				</div>
				
			</form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
		</div>
		</el-dialog> -->

		

		<el-dialog title="修改信息" :visible.sync="dialogVisible2" width="400px">
		
			<el-form ref="editform" :model="editform" label-width="80px">
				<el-form-item label="名称">
    				<el-input v-model="editform.name" autocomplete="off"></el-input>
				</el-form-item>
				<!-- <el-form-item label="url">
    				<el-input v-model="editform.url" autocomplete="off"></el-input>
				</el-form-item> -->
			</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible2 = false">取 消</el-button>
			<el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
		</div>
		</el-dialog>

	</div>
</template>

<script>
	export default{
		name:"FunctionList",
		data(){
			return{
				searchForm:{
					name:'',
					url:''
				},
				functions:[{
					name:"系统管理功能",
					//url:"xxx/xxx/xxx",
						  id:1,
				},{
						  id:2,
					name:"人事管理功能",
					//url:"xxx/xxx/xxx"
				},{
						  id:3,
					name:"财务管理功能",
					//url:"xxx/xxx/xxx"
				},{
						  id:4,
					name:"护理管理功能",
					//url:"xxx/xxx/xxx"
				},{
						  id:5,
					name:"XX功能",
					//url:"xxx/xxx/xxx"
				}],
				checkedFuncs:[],
				options: [{
				value: '选项1',
				label: '监护人员'
				}, {
				value: '选项2',
				label: '护理人员'
				}, {
				value: '选项3',
				label: '管理人员'
				}],
				value:"",
				searchform:{
					name:'',
					url:''
				},
				//弹出添加表单
				dialogFormVisible: false,
				form: {
				name: '',
				url: ''
				},
				formLabelWidth: '120px',
				//弹出表单结束
				dialogVisible1: false,
				dialogVisible2: false,
				//修改用户信息的表单
				editform: {
				name: '',
				url: ''
				}
			}
		},
		methods:{
			//查看
			handleClick(row) {
				console.log(row);
				this.dialogVisible1 = true
			},
			search(){
				console.log(this.searchForm.name+'/'+this.searchForm.url)
			},
			handleClose(done) {
				// this.$confirm('确认关闭？')
				// .then(_ => {
				// 	done();
				// })
				// .catch(_ => {});
				this.dialogVisible1 = false
			},
			//删除
			del(row) {
				this.$confirm('是否删除'+row.id, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
			},
			//修改
			edit(row){
				this.dialogVisible2 = true
				this.editform.name = row.name
				this.editform.url = row.url
				this.editform.id = row.id
			},
			giveFuncs(row){
				this.dialogVisible1 = true
			}
		}
	}
</script>

<style scoped="scoped">
	.searchform{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
</style>
